<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件分支语句</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
        }
    </style>
</head>
<body>
<script>
    /* 条件分支语句即swith语句
    *   switch(){
    *       case表达式:
    *           语句...
    *           break;
    *       case表达式:
    *           语句...
    *           break;
    *       default:
    *           语句...
    *           break;
    *   }
    * switch...case 语句 在执行这个语句时 会依次将case后的表达式的值与switch后的条件表达式的值进行全等比较
    *               如果比较的结果为true  则从当前case处开始执行代码，当前case后的所有代码都将执行，
    *               在每个case后都加上一个break；就可以了 退出当前switch语句，
    *               如果比较的结果是false 则继续向下比较下去
    *               如果所有的比较值都是false 那么执行default语句
    *               switch语句和if语句的功能实际上是重复的，使用switch可以实现if的功能
    * */
    //举例1 根据num的值 输出对应的中文
    var num=1;
    if (num==1){
        alert("壹");
    }else if(num==2){
        alert("贰");
    }

    window.onload=function () {
        var box1=document.getElementById("box1");
        document.onkeydown=function (event) {
        event=event||window.event;
        //定义一个变量 表示速度
            var speed=10;
        // console.log(event.keyCode);
        //向左按键 keyCode 返回值37 向上按键 返回值38
       //向右按键 keyCode 返回值39 向下按键 返回值40
            switch (event.keyCode) {
                case 37:
                    box1.style.left=box1.offsetLeft-speed+"px";
                    break;
                case 39:
                    box1.style.left=box1.offsetLeft+speed+"px";
                    break;
                case 38:
                    box1.style.top=box1.offsetTop-speed+"px";
                    break;
                case 40:
                    box1.style.top=box1.offsetTop+speed+"px";
                    break;
            }
        }
    }

</script>
<div id="box1"></div>
</body>
</html>